<template>
  <div class="MaxBox">
    <div class="TopBox">
      <div class="RetBox2">
        <div class="FunctionBox">
          <div class="FunctionTitle">
            <i class="el-icon-monitor" /> <b>功 能</b>
            <div class="FunctionInfo">
              <div class="chunk" style="background-color:#FF9999">
                <div class="NameNumber">
                  <div>{{ indexData.stuAtSchoolNumber.name }}</div>
                  <div style="font-size: 50px;">{{ indexData.stuAtSchoolNumber.number }}</div>
                </div>
                <div><i class="el-icon-school" /></div>
              </div>
              <div class="chunk" style="background-color:#FFBF80">
                <div class="NameNumber">
                  <div>{{ indexData.stuLeaveNumber.name }}</div>
                  <div style="font-size: 50px;">{{ indexData.stuLeaveNumber.number }}</div>
                </div>
                <div><i class="el-icon-user" /></div>
              </div>
              <div class="chunk" style="background-color:#EBEB60">
                <div class="NameNumber">
                  <div>{{ indexData.unreviewedNumber.name }}</div>
                  <div style="font-size: 50px;">{{ indexData.unreviewedNumber.number }}</div>
                </div>
                <div><i class="el-icon-s-operation" /></div>
              </div>
              <div class="chunk" style="background-color:#A4F4A4">
                <div class="NameNumber">
                  <div>{{ indexData.hasReviewedNumber.name }}</div>
                  <div style="font-size: 50px;">{{ indexData.hasReviewedNumber.number }}</div>
                </div>
                <div><i class="el-icon-finished" /></div>
              </div>
              <div class="chunk" style="background-color:#8DD8F1">
                <div class="NameNumber">
                  <div>{{ indexData.assessmentTodayBackNumber.name }}</div>
                  <div style="font-size: 50px;">{{ indexData.assessmentTodayBackNumber.number }}</div>
                </div>
                <div><i class="el-icon-location-information" /></div>
              </div>
              <div class="chunk" style="background-color:#CABBF7">
                <div class="NameNumber">
                  <div>{{ indexData.unEliminateNumber.name }}</div>
                  <div style="font-size: 50px;">{{ indexData.unEliminateNumber.number }}</div>
                </div>
                <div><i class="el-icon-document-delete" /></div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="RetBox">
        <div class="MessageBox">
          <div class="MessageTitle"><i class="el-icon-bell" /> <b>通 知</b></div>
          <span v-if="this.noticelist.length != 0">
            <div class="MessageInfo" v-for="(item, index) in noticelist" :key="index">
              <i @click="goNotification">
                <div class="MessageDataBox">
                  <div class="Mcontent">系统通知：{{ item.noticeContent }}</div>
                  <div class="Mnew">{{ item.status == 1 ? "new" : "" }}</div>
                  <div class="Mtime">{{ item.createTime }}</div>
                </div>
                <hr color="#F0F0F0" />
              </i>
            </div>
          </span>
          <div v-else class="notInfo">
            <el-empty id="notInfo-EmptyBox" description="暂无数据" :image-size="200" style="font-size:40px" />
          </div>
        </div>
      </div>
    </div>
    <div class="BoTBox">
      <div class="BotTitle">请假数据统计</div>
      <el-col :xs="24" :sm="24" :lg="24">
        <div class="chart-wrapper">
          <bar-chart />
        </div>
      </el-col>
    </div>
    <div></div>
  </div>
</template>

<script>
import { getUserProfile } from "@/api/system/user";
import BarChart from './dashboard/BarChart'
import { listNoticeAll, sureSotificationById } from "@/api/system/notice";
import { indexData } from "@/api/backend/index";

export default {
  name: "Index",
  components: {
    BarChart,
  },
  data() {
    return {
      user: {},
      roleGroup: {},
      postGroup: {},
      activeTab: "userinfo",
      noticelist: [],
      indexData: {
        stuAtSchoolNumber: {
          name: "在校人数",
          number: 0,
        },
        stuLeaveNumber: {
          name: "离校人数",
          number: 0,
        },
        hasReviewedNumber: {
          name: "已通过假期",
          number: 0,
        },
        unreviewedNumber: {
          name: "未审核假期",
          number: 0,
        },
        assessmentTodayBackNumber: {
          name: "今日销假人数",
          number: 0,
        },
        unEliminateNumber: {
          name: "未销假学生数",
          number: 0,
        },
      },
    };
  },
  created() {
    this.getIndex();
    this.getUser();
    this.getNoticeList();
  },
  methods: {
    getIndex() {
      indexData().then((response) => {
        this.indexData = response.data;
      });
    },
    getUser() {
      getUserProfile().then((response) => {
        this.user = response.data;
        this.roleGroup = response.roleGroup;
        this.postGroup = response.postGroup;
      });
    },
    goNotification() {
      this.$router.push("/system/notice");
    },
    // 获取通知列表
    getNoticeList() {
      let date = { status: 1 };
      listNoticeAll(date).then((response) => {
        var data = response.rows;
        if (data.length != 0) {
          for (let i = 0; i < data.length; i++) {
            this.noticelist.push(data[i]);
          }
        }
      });
    },
  },
};
</script>

<style lang="scss">
#notInfo-EmptyBox .el-empty__description p {
  font-size: 24px;
}
</style>

<style scoped lang="scss">
.Mnew {
  height: 30px;
  width: 5%;
  line-height: 22px;
  float: left;
  text-align: center;
  color: red;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

.Mtime {
  padding-right: 16px;
  text-align: right;
  font-size: 12px;
  height: 30px;
  width: 25%;
  line-height: 22px;
  float: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

.Mcontent {
  padding-left: 16px;
  height: 30px;
  line-height: 22px;
  width: 70%;
  float: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}

.MessageDataBox {
  width: 100%;
  padding-bottom: 10px;
}

.notInfo {
  margin-top: 30px;
}

.MessageInfo {
  display: block;
  width: 100%;
  height: 30px;
  padding: 10px 0px 32px 0px;
}

.MessageInfo:nth-child(2n) {
  background-color: #F9F9F9;
}

.FunctionInfo {
  width: 100%;
  height: 20vh;
  // background: rgba(190, 53, 53, 0.404);
  margin-top: 7px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

.BotTitle {
  text-align: center;
  font-size: 20px;
  margin: 10px;
}

.MessageTitle {
  width: 100%;
  background-color: gray;
  height: 30px;
  color: #fff;
  font-size: 15px;
  line-height: 30px;
  padding-left: 15px;
  border-radius: 10px 10px 0px 0px;
}

.FunctionTitle {
  width: 100%;
  background-color: gray;
  height: 30px;
  color: #fff;
  font-size: 15px;
  line-height: 30px;
  padding: 0 15px;
  border-radius: 10px 10px 0px 0px;
}

.MessageBox {
  width: 100%;
  background-color: white;
  height: 35vh;
  border-radius: 10px;
  box-shadow: lightgray 0px 0px 10px;
}

.FunctionBox {
  width: 100%;
  background-color: white;
  height: 35vh;
  border-radius: 10px;
  box-shadow: lightgray 0px 0px 10px;
}

.MenuBox1 {
  width: 24%;
  height: 7vh;
  // border: 1px solid;
  float: left;
  margin-left: 1px;
  margin-bottom: 1px;
  margin-top: 30px;
  // background-color: rgba(225, 97, 0);
  background-color: rgba(192, 192, 192, 0.76);
}

.MenuBox2 {
  width: 24%;
  height: 7vh;
  // border: 1px solid;
  float: left;
  margin-left: 1px;
  margin-bottom: 1px;
  margin-top: 30px;
  background-color: rgba(192, 192, 192, 0.2);
  // background-color: rgba(65, 105, 225);
  // background-color: rgba(192, 192, 192, 0.5);
}

.MaxBox {
  margin: 0px;
  padding: 0px;
}

.TopBox {
  width: 100%;
  height: 30vh;
  display: flex;
  flex-direction: row;
  // justify-content: space-around;
}

.LefBox {
  width: 50%;
  height: 30vh;
  float: left;
  padding-top: 50px;
  padding-left: 30px;
}

.RetBox {
  width: 60%;
  height: 30vh;
  float: left;
  padding: 50px 50px 50px 25px;
}

.RetBox2 {
  width: 40%;
  height: 30vh;
  float: left;
  padding: 50px 25px 50px 50px;
}

.BoTBox {
  padding-top: 200px;
  width: 100%;
  height: 40vh;
}

.userBox {
  width: 100%;
  height: 15vh;
}
</style>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

.chunk {
  width: 48%;
  height: 48%;
  margin: 5px 0;
  padding: 0 20px;
  background: rgba(82, 153, 53, 0.678);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  border-radius: 5px;
}

.NameNumber {
  width: 60%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
</style>
